<template>
  <div>
    <div id="b">
      <div id="bb">校 园 帮 帮</div>
    </div>
    <div class="aaa">
      <el-card class="box-card" v-for="item in helpInfo">
        <div slot="header" class="cardheader">
          <span>帮帮我</span>
          <el-button
            id="bbbb"
            @click="helphim(item)"
            style="float: right"
            type="text"
            >帮助他</el-button
          >
        </div>
        <div class="text item">求助类型：{{ item.type }}</div>
        <div class="text item">求助人电话：{{ item.phone }}</div>
        <div class="text item">地点：{{ item.location }}</div>
        <div class="text item">求助描述：{{ item.detail }}</div>
      </el-card>
    </div>
  </div>
</template>
<script>
import { getAllHelp } from "../services/help";
import { helpHim } from "../services/help";
export default {
  data() {
    return {
      helpInfo: [],
    };
  },
  methods: {
    helphim: function (item) {
      this.helpInfo.helper_id = this.$store.state.account.user.id;
      this.helpid = item.helpid;
      this.$confirm("你确定要帮助他吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then((res) => {
          helpHim({
            helper_id: this.helpInfo.helper_id,
            helpid: this.helpid,
          }).then((res) => {
            getAllHelp().then((res) => {
              this.helpInfo = res.data.result;
            });
            this.$message({
              type: "success",
              message: "帮助成功!",
            });
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
  },
  mounted: function () {
    getAllHelp().then((res) => {
      this.helpInfo = res.data.result;
      console.log(res.data.result);
    });
  },
};
</script>

<style scoped>
#b {
  background: url("../assets/HelpMall.png");
  width: 100%;
  height: 25%;
  background-size: 100% 100%;
}
#bb {
  color: aliceblue;
  text-align: center;
  font-size: 60px;
  font-weight: bold;
  padding: 10px 0 0 0;
}
.text {
  font-size: 15px;
  font-weight: bold;
  color:#632405
}
.item {
  margin-bottom: 20px;
}
.aaa {
  display: flex;
  flex-wrap: wrap;
}
.box-card {
  width: 400px;
  border-radius: 10px;
  width: 330px;
  height: 420px;
  border: 1px solid #9d9d9e;
  margin-left: 20px;
  box-shadow: 0 0 30px #3a3838;
  margin-top: 40px;
}
.el-card ::v-deep .el-card__header {
  padding: 20px 20px;
  background-color: rgb(194, 70, 48);
  color:rgb(245, 242, 239);
  font-size: 25px;
  font-weight: bold;
}
</style>